<script setup>
import {useShopInfoStore} from "@/stores/shop.js";
import {storeToRefs} from "pinia";
import {ref} from "vue";
import {useRouter} from "vue-router";

const shopInfoStore = useShopInfoStore();
const {nearbyList} = storeToRefs(shopInfoStore);
// if (nearbyList.value.)
const shopInfo = ref([]);

nearbyList.value.forEach((item, index) => {
  // console.log(item)
  if (item.cartList.length !== 0) {
    shopInfo.value.push(item)
    // console.log(item)
    // console.log(shopInfo.value)
  }
});
  let router = useRouter();
console.log()
  const jumpPage=()=>{
  router.push({name: 'orderConfirmation',query:{shopID:shopInfo.value[0].id}})
}
</script>

<template>
  <div class="card" v-for="(item, index) in shopInfo" :key="index" @click="jumpPage">
    <div class="card_shop_name">{{ item.name }}</div>
    <div class="card_list" v-for="(item, index) in item.cartList">
      <div class="card_list_item">
        <div class="card_list_item_img">
          <img :src="`http://www.dell-lee.com/imgs/vue3/`+item.imgName+`.png`" alt="">
        </div>
        <div class="card_list_item_content">
          <div class="card_list_item_content_title">{{ item.title }}</div>
          <div class="card_list_item_content_price">
            <span class="highlight">￥{{ item.price }} x {{item.number}}</span>
            <span>￥{{ (item.price * item.number).toFixed(2) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card_total">共计{{item.cartList.length}}件</div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";
.card {
  margin: .18rem;
  padding: .18rem;
  background-color: $bgColor;

  &_shop_name {
    line-height: .42rem;
    font-size: .16rem;
    margin-bottom: .18rem;
  }

  &_list {
    &_item {
      display: flex;
      margin-bottom: .18rem;

      &_img {
        width: .48rem;
        margin-right: .18rem;
        img {
          width: .48rem;
          height: .48rem;
        }
      }
      &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        &_title {
          font-size: .14rem;
          font-weight: bold;
          color: $content_fontcolor;
          @include ellipse;
        }
        &_price {
          display: flex;
          justify-content: space-between;

          .highlight {
            color: $hightlight-fontColor;
          }
        }
      }
    }
  }

  &_total {
    line-height: .26rem;
    text-align: center;
    font-size: .14rem;
    color: $light-fontColor;
    background-color: $search-bgColor;
  }
}
</style>